<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>功能测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .test-section {
            background: white;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .test-button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        .test-button:hover {
            background: #0056b3;
        }
        .result {
            margin: 10px 0;
            padding: 10px;
            border-radius: 4px;
            font-family: monospace;
        }
        .success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
    </style>
</head>
<body>
    <h1>🧪 Chrome 扩展功能测试</h1>

    <div class="test-section">
        <h2>基础功能测试</h2>
        <button class="test-button" onclick="testBasicJS()">测试基础 JavaScript</button>
        <button class="test-button" onclick="testChromeAPI()">测试 Chrome API</button>
        <div id="basic-result" class="result"></div>
    </div>

    <div class="test-section">
        <h2>存储功能测试</h2>
        <input type="text" id="testInput" placeholder="输入测试内容" style="width: 200px; padding: 8px; margin-right: 10px;">
        <button class="test-button" onclick="testStorage()">测试存储</button>
        <button class="test-button" onclick="testRetrieve()">测试读取</button>
        <div id="storage-result" class="result"></div>
    </div>

    <div class="test-section">
        <h2>事件监听器测试</h2>
        <button class="test-button" id="eventTestBtn">测试事件监听器</button>
        <div id="event-result" class="result"></div>
    </div>

    <div class="test-section">
        <h2>Crypto API 测试</h2>
        <button class="test-button" onclick="testCryptoAPI()">测试哈希计算</button>
        <div id="crypto-result" class="result"></div>
    </div>

    <script>
        // 基础 JavaScript 测试
        function testBasicJS() {
            const result = document.getElementById('basic-result');
            try {
                const message = 'Hello, World!';
                const processed = message.toUpperCase();
                result.className = 'result success';
                result.textContent = `✅ 基础 JavaScript 正常工作: ${processed}`;
            } catch (error) {
                result.className = 'result error';
                result.textContent = `❌ 基础 JavaScript 错误: ${error.message}`;
            }
        }

        // Chrome API 测试
        async function testChromeAPI() {
            const result = document.getElementById('basic-result');
            try {
                if (typeof chrome !== 'undefined' && chrome.storage) {
                    result.className = 'result success';
                    result.textContent = '✅ Chrome API 可用';
                } else {
                    result.className = 'result error';
                    result.textContent = '❌ Chrome API 不可用 (这在普通网页中是正常的)';
                }
            } catch (error) {
                result.className = 'result error';
                result.textContent = `❌ Chrome API 错误: ${error.message}`;
            }
        }

        // 存储功能测试
        async function testStorage() {
            const result = document.getElementById('storage-result');
            const input = document.getElementById('testInput');
            const value = input.value || 'default test value';

            try {
                if (chrome && chrome.storage && chrome.storage.sync) {
                    await chrome.storage.sync.set({ 'testKey': value });
                    result.className = 'result success';
                    result.textContent = `✅ 存储成功: ${value}`;
                } else {
                    result.className = 'result info';
                    result.textContent = 'ℹ️ Chrome Storage API 不可用 (在普通网页中正常)';
                }
            } catch (error) {
                result.className = 'result error';
                result.textContent = `❌ 存储错误: ${error.message}`;
            }
        }

        // 读取功能测试
        async function testRetrieve() {
            const result = document.getElementById('storage-result');
            try {
                if (chrome && chrome.storage && chrome.storage.sync) {
                    const data = await chrome.storage.sync.get('testKey');
                    result.className = 'result success';
                    result.textContent = `✅ 读取成功: ${data.testKey || '未找到数据'}`;
                } else {
                    result.className = 'result info';
                    result.textContent = 'ℹ️ Chrome Storage API 不可用 (在普通网页中正常)';
                }
            } catch (error) {
                result.className = 'result error';
                result.textContent = `❌ 读取错误: ${error.message}`;
            }
        }

        // 事件监听器测试
        document.addEventListener('DOMContentLoaded', function() {
            const eventBtn = document.getElementById('eventTestBtn');
            const eventResult = document.getElementById('event-result');

            if (eventBtn) {
                eventBtn.addEventListener('click', function() {
                    eventResult.className = 'result success';
                    eventResult.textContent = '✅ 事件监听器正常工作!';
                    console.log('Event listener fired successfully');
                });
                console.log('Event listener attached successfully');
            } else {
                console.error('Event button not found');
            }
        });

        // Crypto API 测试
        async function testCryptoAPI() {
            const result = document.getElementById('crypto-result');
            try {
                const message = 'Hello, Crypto!';
                const encoder = new TextEncoder();
                const data = encoder.encode(message);
                const hashBuffer = await crypto.subtle.digest('SHA-256', data);
                const hashArray = Array.from(new Uint8Array(hashBuffer));
                const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');

                result.className = 'result success';
                result.textContent = `✅ Crypto API 正常工作，SHA256: ${hashHex.substring(0, 16)}...`;
            } catch (error) {
                result.className = 'result error';
                result.textContent = `❌ Crypto API 错误: ${error.message}`;
            }
        }

        // 页面加载完成后运行基础测试
        window.addEventListener('load', function() {
            console.log('Test page loaded successfully');
            document.getElementById('basic-result').className = 'result info';
            document.getElementById('basic-result').textContent = '📋 测试页面已加载，点击按钮开始测试';
        });
    </script>
</body>
</html>